<script setup>
import { useUserStore } from '@/store/modules/user.js'
import { getLocalImageUrl, setImgUrl } from '@/utils/index.js'
import { useI18n } from 'vue-i18n'
import { RouterLink, useRoute } from 'vue-router'

const { t } = useI18n()
const route = useRoute()
const userStore = useUserStore()
const userInfo = userStore.userInfo

const userMenuOptions = reactive([
  {
    key: '/user/info',
    label: () =>
      h(
        RouterLink,
        {
          to: '/user/info',
        },
        { default: () => t('user.userInfo') },
      ),
  },
  {
    key: '/user/order',
    label: () =>
      h(
        RouterLink,
        {
          to: '/user/order',
        },
        { default: () => t('user.myOrders') },
      ),
  },
])
const currentMenu = ref(route.path)
</script>

<template>
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 space-y-4">
    <div class="flex gap-2">
      <div
        class="w-[240px] transition-all duration-100 ease-in-out"
      >
        <n-card class="w-full text-center">
          <n-avatar v-if="userInfo.avatar !== '' " :src="setImgUrl(userInfo.avatar)" :size="80" round />
          <n-avatar v-else :size="80" :src="getLocalImageUrl('avatar.png')" round />
          <div class="relative top-[5px] text-xl">
            {{ userInfo.nickName }}
          </div>
        </n-card>
        <n-card class="mt-2" size="small">
          <n-menu
            v-model:value="currentMenu"
            :options="userMenuOptions"
          />
        </n-card>
      </div>
      <div class="flex-1">
        <router-view />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

</style>
